<template>
	<uni-popup ref="popup" type="center" :mask-click="false" :is-mask-click="false">
		<view class="modal">
			<view :class="['modal-content', show && 'show']">
				<view class="modal-header">
					<view class="h1">V {{ upgradeInfo['title'] }}</view>
					<view class="h2">有新版本更新啦！</view>
					<view class="h3">{{ upgradeInfo['title'] }}</view>
				</view>
				<view class="modal-body">
					<view class="content">
						<text>{{ upgradeInfo['contents'] }}</text>
					</view>
					<view class="status flex-center">
						<!-- //更新APK -->
						<template v-if="type == 1">
							<view class="btn" v-if="!isDown" @click="startUpdate">立即更新</view>
							<template v-else>
								<view class="btn" v-if="apkFile || (downloadSize === downloadTotal && downloadTotal)" @click="install">安装</view>
								<view class="progress" v-else>
									<view class="percentage" :style="{ width: (downloadSize / downloadTotal) * 100 + '%' }"></view>
								</view>
							</template>
						</template>
						<!-- 更新WGT -->
						<template v-if="type == 2">
							<view class="btn" @click="installWgt">立即更新</view>
						</template>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import { mapState } from 'vuex';
import Updater from '@/utils/upgrade.js';
export default {
	name: 'upgrade',
	computed: {
		...mapState({
			upgradeInfo: (state) => state.general.upgradeInfo
		}),
		//更新地址
		upUrl() {
			return this.upgradeInfo['url'];
		}
	},
	props: {
		isHide: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			type: 1, //1更新APK  2 更新WGT

			isDown: false,
			downloadTotal: 0,
			downloadSize: 0,
			apkFile: '',
			show: false
		};
	},
	onLoad({ type }) {
		this.type = type || 1;
	},
	mounted() {
		setTimeout(() => {
			this.$refs.popup.open();
		}, 1);
	},
	//离开页面时  清空所有存储的更新信息
	beforeDestroy() {
		this.$store.commit('general/CLEAR_UPINFO');
	},
	onBackPress(e) {
		if (e.from == 'backbutton') return true; //APP安卓物理返回键逻辑
	},
	methods: {
		close() {
			if (this.isHide) {
				this.$emit('close');
			}
		},
		//更新WGT
		installWgt() {
			plus.nativeUI.showWaiting(this.$t('pres.azgx'));
			setTimeout(() => {
				plus.nativeUI.closeWaiting();
				//更新完成  清空存储的版本信息
				plus.runtime.restart();
				this.$store.commit('general/CLEAR_UPINFO');
			}, 1000);
		},
		//开始更新
		async startUpdate() {
			Updater.downloadApk(this.upUrl, 'apk', (download) => {
				this.isDown = true;
				this.downloadTotal = download.downloadTotal;
				this.downloadSize = download.downloadSize;
			}).then((file) => {
				this.apkFile = file;
			});
		},
		//开始安装
		install() {
			Updater.installApk();
		}
	}
};
</script>

<style lang="scss">
page {
	background: transparent !important;
}

.modal {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	background: #fff !important;
	border-radius: 20rpx;
	

	.modal-content {
		width: 580rpx;
		position: relative;
		z-index: 10;
		transition: all 0.2s ease-in-out;
		background: transparent !important;

		&.show {
			left: 0;
		}
	}

	.modal-header {
		width: 100%;
		height: 396rpx;
		background: url('../static/images/default/update-bg.png') top left no-repeat;
		background-size: 100% 396rpx;
		box-sizing: border-box;
		padding-top: 100rpx;
		text-align: center;
		position: relative;
		background-color: rgba(255, 255, 255, 0);
		border-radius: 20rpx;
		// overflow: hidden;
		top:-40px;

		.h1 {
			font-size: 32rpx;
			padding-left: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFF;
			text-align: left;
		}

		.h2 {
			padding: 10rpx 30rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFF;
			text-align: left;
		}

		.h3 {
			padding-left: 30rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFF;
			text-align: left;
		}
	}

	.modal-body {
		width: 100%;
		background: #fff;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		.content {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 50rpx;
			margin-bottom: 50rpx;
			min-height: 6vh;
			max-height: 10vh;
			overflow: auto;
		}

		.status {
			height: 100rpx;
		}

		.btn {
			width: 407rpx;
			height: 88rpx;
			background: var(--theme);
			box-shadow: 0px 8rpx 12rpx 1px rgba(227, 192, 28, 0.09);
			border-radius: 44rpx;
			opacity: 1;
			border: 0px solid #000000;

			text-align: center;
			line-height: 88rpx;

			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}

		.progress {
			width: 520rpx;
			height: 24rpx;
			background: #eeeeee;
			border-radius: 12rpx;
			position: relative;
			overflow: hidden;

			.percentage {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				background: linear-gradient(49deg, #39f5fc 0%, #acfabc 53%, #ffc967 100%);
				border-radius: 12rpx;
			}
		}
	}
}
</style>
